<template>
  <div class="app-container">
    <!-- v-permission="['eqt:eqtOrder:read']"
    v-permission="['eqt:eqtOrder:create']"
    查询结果
    v-permission="['eqt:eqtOrder:update2']"
    v-permission="['eqt:eqtOrder:delete2']"
    操作
    v-permission="['eqt:eqtOrder:update']"
    v-permission="['eqt:eqtOrder:delete']"
    v-permission="['eqt:eqtOrder:update']" -->
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <!--<el-input v-model.trim="listQuery.feuipmentid" clearable class="filter-item" style="width: 200px;" placeholder="请输入设备ID" maxlength="32" oninput="value=value.replace(/[^\d]/g,'')"/>-->
      <el-input v-model.trim="listQuery.fequipmentname" clearable class="filter-item" style="width: 200px;" placeholder="请输入设备名称"/>
      <el-select v-model="listQuery.feuipmenttype" clearable filterable class="filter-item" placeholder="请选择设备类型">
        <el-option
          v-for="item in sTsEquipmentDictOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button class="filter-item" :style="{background:buttonColor.lookup,color:buttonColor.color}" icon="el-icon-search" @click="handleFilter">查找</el-button>
      <el-button class="filter-item" :style="{background:buttonColor.add ,color:buttonColor.color}" icon="el-icon-edit" @click="handleCreate">添加</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" :tree-props="{children: 'children'}" row-key="feuipmentid" element-loading-text="正在查询中。。。" border fit highlight-current-row>

      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table :data="scope.row.sTsEqtDetails" row-key="id" border fit highlight-current-row>
            <el-table-column align="center" label="序号" prop="fentryid"/>
            <!--<el-table-column align="center" label="设备ID" prop="feuipmentid"/>-->
            <el-table-column align="center" label="指令描述" prop="fdescribe"/>
            <el-table-column align="center" label="控制指令" prop="faction"/>
            <el-table-column align="center" label="设备指令" prop="finstructions"/>
            <el-table-column align="center" label="设备标识" prop="fmark"/>
            <el-table-column align="center" label="数字属性" prop="fnumflag"/>
            <el-table-column align="center" label="最低值" prop="fbegnum"/>
            <el-table-column align="center" label="最高值" prop="fendnum"/>
            <el-table-column align="center" label="操作" width="150" class-name="small-padding">
              <template slot-scope="scope">
                <el-button :style="{background:buttonColor.edit,color:buttonColor.color}" size="mini" @click="handleUpdate2(scope.row)">编辑</el-button>
                <el-button :style="{background:buttonColor.delete,color:buttonColor.color}" size="mini" @click="handleDelete2(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <!--<el-table-column align="center" label="设备ID" prop="feuipmentid"/>-->
      <el-table-column align="center" label="设备编号" prop="fequipmentno"/>
      <el-table-column align="center" label="设备名称" prop="fequipmentname"/>
      <!--<el-table-column align="center" label="分类编号" prop="fclassstno"/>-->
      <el-table-column :formatter="formatSite" align="center" label="设备类型" prop="feuipmenttype"/>
      <!-- <el-table-column align="center" label="设备类型" prop="feuipmenttype">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.feuipmenttype | siteTypeFilter }}</el-tag>
        </template>
      </el-table-column>-->
      <el-table-column align="center" label="控制面板" prop="fpanel">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.fpanel | statusFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="计量单位" prop="funit"/>
      <el-table-column align="center" label="品牌" prop="fbrand"/>
      <el-table-column align="center" label="型号" prop="fspec"/>
      <el-table-column align="center" label="使用年限" prop="fuseyear"/>
      <el-table-column :formatter="dateFormat" align="center" label="修改时间" prop="fupddate"/>
      <!--<el-table-column align="center" label="操作员" prop="foperator"/>
-->
      <el-table-column align="center" label="操作" width="250" class-name="small-padding">
        <template slot-scope="scope">
          <el-button :style="{background:buttonColor.edit,color:buttonColor.color}" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button :style="{background:buttonColor.delete,color:buttonColor.color}" size="mini" @click="handleDelete(scope.row)">删除</el-button>
          <el-button :style="{background:buttonColor.add,color:buttonColor.color}" size="mini" @click="handleCreate2(scope.row)">添加指令集</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <!-- 添加或修改对话框 -->
    <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 500px; margin-left:20px;">
        <el-row>
          <el-col :span="10">
            <el-form-item class="el-form-item-small" label="设备类型" prop="feuipmenttype" style="width: 250px">
              <el-select v-model="dataForm.feuipmenttype" class="filter-item" placeholder="请选择设备类型">
                <el-option
                  v-for="item in sTsEquipmentDictOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10" style="padding-left: 80px">
            <el-form-item class="el-form-item-small" label="是否有面板" prop="fpanel" style="width: 250px">
              <el-select v-model="dataForm.fpanel" class="filter-item" placeholder="请选择">
                <el-option v-for="(key, value) in statusMap" :key="key" :label="key" :value="value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="设备编号" prop="fequipmentno" style="width: 250px">
              <el-input v-model="dataForm.fequipmentno"/>
            </el-form-item>
          </el-col>
          <el-col :span="10" style="padding-left: 80px">
            <el-form-item label="设备名称" prop="fequipmentname" style="width: 250px">
              <el-input v-model="dataForm.fequipmentname"/>
            </el-form-item>
          </el-col>
        </el-row>
        <!--<el-row>
          <el-col :span="10">
            <el-form-item label="设备ID" prop="feuipmentid" style="width: 250px">
              <el-input v-model="dataForm.feuipmentid" :disabled="dialogStatus=='update'"/>
            </el-form-item>
          </el-col>
          <el-col :span="10" style="padding-left: 80px">
            <el-form-item label="所属学校" prop="fsiteNo" style="width: 250px">
              <el-input v-model="dataForm.fsiteNo"/>
            </el-form-item>
          </el-col>
        </el-row>-->
        <el-row v-show="false">
          <el-col :span="10">
            <el-form-item label="分类编号" prop="fclassstno" style="width: 250px">
              <el-input v-model="dataForm.fclassstno" type="number"/><!-- oninput="value=value.replace(/[^\d]/g,'')"-->
            </el-form-item>
          </el-col>
          <el-col :span="10" style="padding-left: 80px">
            <el-form-item label="计量单位" prop="funit" style="width: 250px">
              <el-input v-model="dataForm.funit"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="品牌" prop="fbrand" style="width: 250px">
              <el-input v-model="dataForm.fbrand"/>
            </el-form-item>
          </el-col>
          <el-col :span="10" style="padding-left: 80px">
            <el-form-item label="型号" prop="fspec" style="width: 250px">
              <el-input v-model="dataForm.fspec"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="false">
          <!--<el-col :span="10">
            <el-form-item label="使用年限" prop="fuseyear" style="width: 250px">
              <el-input v-model="dataForm.fuseyear"/>
            </el-form-item>
          </el-col>-->
          <el-col :span="10"><!-- style="padding-left: 80px"-->
            <el-form-item label="设备图片(2M内)" prop="fimage" style="width: 250px">
              <!--<el-input v-model="dataForm.fimage"/>-->
              <el-upload
                v-model="dataForm.fimage"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :action="uploadPath"
                class="avatar-uploader">
                <img v-if="dataForm.fimage" :src="dataForm.fimage" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"/>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <!--<el-form-item label="操作员" prop="foperator">
          <el-input v-model="dataForm.foperator"/>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="dialogStatus=='create'" :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="createData">确定</el-button>
        <el-button v-else :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="updateData">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible2">
      <el-form ref="dataForm2" :rules="rules" :model="dataForm2" status-icon label-position="left" label-width="100px" style="width: 500px; margin-left:50px;">
        <el-row>
          <el-col :span="10">
            <el-form-item label="指令描述" prop="fdescribe" style="width: 250px">
              <el-input v-model="dataForm2.fdescribe"/>
            </el-form-item>
          </el-col>
          <el-col :span="10" style="padding-left: 80px">
            <el-form-item label="控制指令" prop="faction" style="width: 250px">
              <el-input v-model="dataForm2.faction"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="设备指令" prop="finstructions" style="width: 250px">
              <el-input v-model="dataForm2.finstructions"/>
            </el-form-item>
          </el-col>
          <el-col :span="10" style="padding-left: 80px">
            <el-form-item label="设备标识" prop="fmark" style="width: 250px">
              <el-input v-model="dataForm2.fmark"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="数字属性" prop="fnumflag" style="width: 250px">
              <el-input v-model="dataForm2.fnumflag"/>
            </el-form-item>
          </el-col>
          <el-col :span="10" style="padding-left: 80px">
            <el-form-item label="最低值" prop="fbegnum" style="width: 250px">
              <el-input v-model="dataForm2.fbegnum"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="最高值" prop="fendnum" style="width: 250px">
              <el-input v-model="dataForm2.fendnum"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="dialogFormVisible2 = false">取消</el-button>
        <el-button v-if="dialogStatus=='create'" :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="createData2">确定</el-button>
        <el-button v-else :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="updateData2">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listEqtOrder, createEqtOrder, createEqtOrder2, updateEqtOrder, updateEqtOrder2, deleteEqtOrder, deleteEqtOrder2, uploadPath } from '@/api/eqtOrder'
import { sTsEquipmentDictOptions } from '@/api/area'
import Pagination from '@/components/Pagination'
import moment from 'moment/moment'
import {buttonColor} from '@/filters/index'
// const siteTypeMap = {
//   1: '排插',
//   2: '空气狗',
//   3: '灯',
//   4: '空调',
//   5: '新风净化器'
// }

// const siteTypeMap = {
//   1: '单插',
//   2: '三插',
//   3: '灯',
//   4: '空调',
//   5: '新风净化器',
//   6: '室外空气狗',
//   7: '室内空气狗'
// }

const statusMap = {
  0: '无',
  1: '有'
}

export default {
  name: 'EqtOrder',
  components: { Pagination },
  filters: {
    // siteTypeFilter(type) {
    //   return siteTypeMap[type]
    // },
    statusFilter(type) {
      return statusMap[type]
    }
  },
  data() {
    return {
      buttonColor:buttonColor,
      uploadPath,
      list: null,
      total: 0,
      sTsEquipmentDictOptions: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        feuipmentid: undefined,
        sort: 'create_time',
        order: 'desc'
      },
      // siteTypeMap,
      statusMap,
      dataForm: {
        id: undefined,
        feuipmentid: undefined,
        fequipmentno: undefined,
        fequipmentname: undefined,
        fsiteNo: undefined,
        fclassstno: undefined,
        feuipmenttype: undefined,
        fpanel: undefined,
        funit: undefined,
        fbrand: undefined,
        fspec: undefined,
        fbuyvat: undefined,
        fbuyprice: undefined,
        fuseyear: undefined,
        fimage: undefined,
        fupddate: undefined,
        foperator: undefined
      },
      dataForm2: {
        id: undefined,
        fentryid: undefined,
        feuipmentid: undefined,
        fdescribe: undefined,
        faction: undefined,
        finstructions: undefined,
        fmark: undefined,
        fnumflag: undefined,
        fbegnum: undefined,
        fendnum: undefined
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      rules: {
        feuipmentid: [
          { required: true, message: '设备Id不能为空', trigger: 'blur' }
        ],
        fequipmentno: [
          { required: true, message: '设备编号不能为空', trigger: 'blur' }
        ],
        fequipmentname: [
          { required: true, message: '设备名称不能为空', trigger: 'blur' }
        ],
        fsiteNo: [
          { required: true, message: '所属学校不能为空', trigger: 'blur' }
        ],
        fclassstno: [
          { required: true, message: '分类编号不能为空', trigger: 'blur' }
        ],
        feuipmenttype: [
          { required: true, message: '设备类型不能为空', trigger: 'blur' }
        ],
        fpanel: [
          { required: true, message: '控制面板不能为空', trigger: 'blur' }
        ],
        funit: [
          { required: true, message: '计量单位不能为空', trigger: 'blur' }
        ],
        fbrand: [
          { required: true, message: '品牌不能为空', trigger: 'blur' }
        ],
        fspec: [
          { required: true, message: '型号不能为空', trigger: 'blur' }
        ],
        fuseyear: [
          { required: true, message: '使用年限不能为空', trigger: 'blur' }
        ],
        fdescribe: [
          { required: true, message: '指令描述不能为空', trigger: 'blur' }
        ],
        faction: [
          { required: true, message: '控制指令不能为空', trigger: 'blur' }
        ],
        finstructions: [
          { required: true, message: '设备指令不能为空', trigger: 'blur' }
        ],
        fmark: [
          { required: true, message: '设备标识不能为空', trigger: 'blur' }
        ],
        fnumflag: [
          { required: true, message: '数字属性不能为空', trigger: 'blur' }
        ],
        fbegnum: [
          { required: true, message: '最低值不能为空', trigger: 'blur' }
        ],
        fendnum: [
          { required: true, message: '最高值不能为空', trigger: 'blur' }
        ]
      },
      permissionDialogFormVisible: false,
      systemPermissions: null,
      assignedPermissions: null,
      permissionForm: {
        roleId: undefined,
        permIds: []
      }
    }
  },
  created() {
    this.getList()
    sTsEquipmentDictOptions()
      .then(response => {
        this.sTsEquipmentDictOptions = response.data.data.list
      })
      .catch(() => {
        this.sTsEquipmentDictOptions = []
      })
  },
  methods: {
    handleAvatarSuccess(res, file) {
      // this.dataForm.fimage = URL.createObjectURL(file.raw)
      this.dataForm.fimage = res.data
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      // }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isLt2M // isJPG &&
    },
    formatSite: function(row, column) {
      for (let i = 0; i < this.sTsEquipmentDictOptions.length; i++) {
        if (row.feuipmenttype === this.sTsEquipmentDictOptions[i].value) {
          return this.sTsEquipmentDictOptions[i].label
        }
      }
      return ''
    },
    dateFormat(row, column) {
      const date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    getList() {
      this.listLoading = true
      listEqtOrder(this.listQuery)
        .then(response => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resetForm() {
      this.dataForm = {
        feuipmentid: undefined,
        fequipmentno: undefined,
        fequipmentname: undefined,
        fsiteNo: undefined,
        fclassstno: undefined,
        feuipmenttype: undefined,
        fpanel: undefined,
        funit: undefined,
        fbrand: undefined,
        fspec: undefined,
        fbuyvat: undefined,
        fbuyprice: undefined,
        fuseyear: undefined,
        fimage: undefined,
        fupddate: undefined,
        foperator: undefined
      }
    },
    resetForm2() {
      this.dataForm2 = {
        fentryid: undefined,
        feuipmentid: undefined,
        fdescribe: undefined,
        faction: undefined,
        finstructions: undefined,
        fmark: undefined,
        fnumflag: undefined,
        fbegnum: undefined,
        fendnum: undefined
      }
    },
    handleCreate() {
      this.resetForm()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.dataForm.fpanel = '0'
      this.dataForm.funit = '台'
      this.dataForm.fuseyear = 2
      this.dataForm.fsiteNo = 0
      this.dataForm.feuipmentid = 0
      this.dataForm.fclassstno = 0
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleCreate2(row) {
      this.dataForm2.feuipmentid = row.feuipmentid
      this.resetForm2()
      this.dataForm2.feuipmentid = row.feuipmentid
      this.dialogStatus = 'create'
      this.dialogFormVisible2 = true
      this.$nextTick(() => {
        this.$refs['dataForm2'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate(valid => {
        debugger
        if (valid) {
          createEqtOrder(this.dataForm)
            .then(response => {
              this.list.unshift(response.data.data)
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '添加设备资料成功'
              })
            })
            .catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.data.msg
              })
            })
        }
      })
    },
    createData2() {
      this.$refs['dataForm2'].validate(valid => {
        if (valid) {
          createEqtOrder2(this.dataForm2)
            .then(response => {
              for (const v of this.list) {
                if (v.feuipmentid === response.data.data.feuipmentid) {
                  v.sTsEqtDetails.unshift(response.data.data)
                  break
                }
              }
              // this.list.unshift(response.data.data)
              this.dialogFormVisible2 = false
              this.$notify.success({
                title: '成功',
                message: '添加指令集成功'
              })
            })
            .catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.data.msg
              })
            })
        }
      })
    },
    handleUpdate(row) {
      this.dataForm = Object.assign({}, row)
      // this.dataForm.feuipmenttype = row.feuipmenttype.toString()
      this.dataForm.fpanel = row.fpanel.toString()
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleUpdate2(row) {
      this.dataForm2.fentryid = row.fentryid
      this.dataForm2 = Object.assign({}, row)
      this.dataForm2.fentryid = row.fentryid
      this.dialogStatus2 = 'update'
      this.dialogFormVisible2 = true
      this.$nextTick(() => {
        this.$refs['dataForm2'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          updateEqtOrder(this.dataForm, this.$route.query.id)
            .then(() => {
              for (const v of this.list) {
                if (v.feuipmentid === this.dataForm.feuipmentid) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, this.dataForm)
                  break
                }
              }
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '更新设备资料成功'
              })
            })
            .catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.data.msg
              })
            })
        }
      })
    },
    updateData2() {
      this.$refs['dataForm2'].validate(valid => {
        if (valid) {
          updateEqtOrder2(this.dataForm2, this.$route.query.id)
            .then(() => {
              var isOk = false
              for (const v of this.list) {
                for (const w of v.sTsEqtDetails) {
                  if (w.fentryid === this.dataForm2.fentryid) {
                    const index = v.sTsEqtDetails.indexOf(w)
                    v.sTsEqtDetails.splice(index, 1, this.dataForm2)
                    const index2 = this.list.indexOf(v)
                    this.list.splice(index2, 1, v)
                    isOk = true
                    break
                  }
                  if (isOk) {
                    break
                  }
                }
              }
              this.dialogFormVisible2 = false
              this.$notify.success({
                title: '成功',
                message: '更新指令集成功'
              })
            })
            .catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.data.msg
              })
            })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('是否要删除该设备资料', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteEqtOrder(row)
          .then(response => {
            this.$notify.success({
              title: '成功',
              message: '删除设备资料成功'
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.msg
            })
          })
      })
    },
    handleDelete2(row) {
      this.$confirm('是否要删除该指令集', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteEqtOrder2(row)
          .then(response => {
            this.$notify.success({
              title: '成功',
              message: '删除指令集成功'
            })
            for (const v of this.list) {
              if (v.feuipmentid === row.feuipmentid) {
                const index = v.sTsEqtDetails.indexOf(row)
                v.sTsEqtDetails.splice(index, 1)
                break
              }
            }
            // const index = this.list.indexOf(row)
            // this.list.splice(index, 1)
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.msg
            })
          })
      })
    },
    indexMethod(index) {
      index = index + 1
      return index
    }
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<style>
  /*处理input type = number的上下箭头*/
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"]{
    -moz-appearance: textfield;
  }
</style>
